<template>
	<view class="page">
		<view class="section">
			<view class="tc flex">
				<uni-icons type="left" class="flex-1 tr padding-right-default" @click="toBack"></uni-icons>
				<picker mode="selector" :value="voucherIndex" :range="checkoutList" @change="pickerChange">
					<view>
						{{voucherDate}}
					</view>
				</picker>
				<uni-icons type="right" class="flex-1 tl padding-left-default" @click="toNext"></uni-icons>
			</view>
		</view>
		<view class="section">
			<view class="flex padding-m br-b-f5">
				<view class="flex-3">项目</view>
				<view class="flex-1">本期</view>
				<view>本年</view>
			</view>
			<scroll-view :scroll-y="true" :show-scrollbar="false" style="height: 90vh;">
				<view v-for="(reportItem,reportItemIndex) in reportItemList">
					<view class="flex padding-m br-b-f5" :style="{fontWeight: reportItem.isBolder ? 'bold':'normal'}">
						<view class="flex-3">{{reportItem.title}}</view>
						<view class="flex-1">{{reportItem.values['本期金额']?reportItem.values['本期金额']:'——'}}</view>
						<view>{{reportItem.values['本年累计金额']?reportItem.values['本年累计金额']:'——'}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
	import report from '../../js/api/report';

	const app = getApp()
	export default {
		data() {
			return {
				checkoutList: [],
				voucherDate: '',
				voucherIndex: 0,
				reportItemList: [],
			}
		},

		onLoad() {
			this.init()
		},
		watch: {
			voucherDate() {
				this.loadData()
			}
		},
		methods: {

			toNext() {
				if (this.voucherIndex === 0) {
					app.globalData.showToast(this.checkoutList[this.voucherIndex] + '是最新期数');
				} else {
					this.voucherIndex -= 1
					this.voucherDate = this.checkoutList[this.voucherIndex]
				}
			},
			toBack() {
				if (this.voucherIndex + 1 === this.checkoutList.length) {
					app.globalData.showToast('没有数据了');
				} else {
					this.voucherIndex += 1
					this.voucherDate = this.checkoutList[this.voucherIndex]
				}
			},
			init() {
				this.checkoutList = uni.getStorageSync(app.globalData.data.cache_checkout_list)
				this.voucherDate = this.checkoutList[0]
			},
			pickerChange(e) {
				this.voucherIndex = e.detail.value
				this.voucherDate = this.checkoutList[e.detail.value]
			},
			loadData() {
				report.lr({
					voucherDate: this.voucherDate,
					dimension: 'TERM',
					reset: false
				}).then((res) => {
					this.reportItemList = res
				})
			},
		}
	}
</script>

<style>

</style>